<template>
  <div class="tools d-flex flex-column justify-content-start">
    <span
      class="iconfont expanded"
      @click="showTools = !showTools"
      v-html="showTools ? '&#xe60a;' : '&#xe609;'"
    />
    <el-collapse-transition>
      <div v-show="showTools">
        <div class="measure">
          <span
            class="iconfont"
            title="全图"
            @click="showCenter"
          >&#xe642;</span>
          <div id="measureDialog">
            <div id="measureTools" class="measureTools">
              <div class="measure-distance" title="测距">
                <span class="iconfont">&#xe601;</span>
              </div>
              <div class="measure-point" title="标点">
                <span class="iconfont">&#xe60c;</span>
              </div>
              <div class="measure-area" title="测面">
                <span class="iconfont">&#xe608;</span>
              </div>
              <div class="measure-clear" title="清除">
                <span class="iconfont">&#xe614;</span>
              </div>
            </div>
          </div>
          <span class="iconfont" title="全屏" @click="full">&#xe637;</span>
        </div>
        <ul class="mapType">
          <li
            v-for="(item, index) in list"
            :key="index"
            :class="{ active: current === index }"
            :title="item.name"
            @click="getCurrent(item.name, index)"
          >
            <span class="iconfont" v-html="item.icon" />
          </li>
        </ul>
        <slot name="bottom" />
      </div>
    </el-collapse-transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showTools: true,
      list: [
        {
          name: '行政区划图',
          icon: '&#xe603;'
        },
        {
          name: '卫星图',
          icon: '&#xe7b9;'
        },
        {
          name: '地形图',
          icon: '&#xe659;'
        },
        {
          name: '无底图',
          icon: '&#xe64c;'
        }
      ],
      center: false,
      current: 0
    }
  },
  methods: {
    getCurrent(data, index) {
      this.current = index
      this.$emit('currentType', data)
    },
    showCenter() {
      this.$emit('center')
    },
    full() {
      this.$emit('full')
    }
  }
}
</script>

<style lang="scss" scoped>
.tools {
  width: 36px;
  height: 30vw;
  position: absolute;
  z-index: 100;
  .expanded {
    width: 36px;
    height: 36px;
    border-radius: 0.208vw;
    font-size: 1.2vw;
    text-align: center;
    line-height: 36px;
    margin-bottom: 0.2vw;
    border-radius: 4px;
    box-shadow: 0px 6px 20px 0px rgba(85, 94, 111, 0.16);
  }
  .measure {
    width: 36px;
    text-align: center;
    border-radius: 0.208vw;
    margin-bottom: 0.2vw;
    .iconfont {
      width: 36px;
      height: 36px;
      font-size: 1.2vw;
    }
  }
  .mapType {
    width: 36px;
    background-color: rgba($color: #032a5b, $alpha: 0.5);
    border: solid 1px #175b9b;
    text-align: center;
    border-radius: 0.208vw;
    li {
      .iconfont {
        width: 36px;
        height: 36px;
        font-size: 1.2vw;
      }
    }
  }
}
.iconfont {
  cursor: pointer;
}
.theme-Dark {
  .expanded {
    background: rgba($color: #1a4780, $alpha: 0.5);
    border: solid 1px #175b9b;
    color: #bcdff5;
  }
  .measure {
    background-color: rgba($color: #032a5b, $alpha: 0.5);
    border: solid 1px #175b9b;
    .iconfont {
      color: #bcdff5;
    }
  }
  .mapType {
    background-color: rgba($color: #032a5b, $alpha: 0.5);
    border: solid 1px #175b9b;
    li {
      &.active {
        .iconfont {
          color: #40c1f0;
        }
      }
    }
    .iconfont {
      color: #bcdff5;
    }
  }
}
.theme-Light {
  .expanded {
    background: rgba($color: #ffffff, $alpha: 0.5);
    border: solid 1px #43b6ff;
    color: #43b6ff;
  }
  .measure {
    background: rgba($color: #ffffff, $alpha: 0.5);
    border: solid 1px #43b6ff;
    .iconfont {
      color: #43b6ff;
    }
  }
  .mapType {
    background: rgba($color: #ffffff, $alpha: 0.5);
    border: solid 1px #43b6ff;
    li {
      &.active {
        .iconfont {
          color: #064797;
        }
      }
    }
    .iconfont {
      color: #43b6ff;
    }
  }
}
</style>
